<html>
<head>
<style>
@page {
  size: 500px 500px;
}
svg {
  border: 2px solid red;
}
</style>
</head>
<body style="padding: 5px;">

<!-- The first circle should be bigger than the second, showing that the script has run. -->
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"
     onload="document.getElementById('c1').setAttribute('r', 50);" >
     
  <circle id="c1" cx="50" cy="50" r="5" />
  
  <script>
     document.getElementById('c1').setAttribute('r', 20);
  </script>
  
  <circle id="c2" cx="150" cy="50" r="5" />
  
</svg>

<!-- The flying saucer raster image should render, since external resources are allowed. -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
  <image xlink:href="https://openhtmltopdf.com/flyingsaucer.png" height="200" width="200"/>
</svg>

</body>
</html>
